<template>
  <div>
    <img src="../../../static/image/logo-1.png" mode="widthFix" class="logo" />
    <input
      type="text"
      placeholder="请输入电话号码"
      class="cellphone"
      maxlength="11"
      v-model="cellphone"
    />
    <input
      type="password"
      placeholder="请输入密码"
      class="password"
      v-model="password"
    />
    <div class="login-desc">请输入注册电话号码及密码</div>
    <button class="login-btn" @click="login()">登录</button>
    <div class="no-account">
      没有账号?<span>
        <router-link to="/register">立即注册</router-link>
      </span>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import axios from "axios";
import toast from "../toast/toast";
export default {
  name: "Login",
  components: {
    toast,
  },
  data() {
    return {
      cellphone: "",
      password: "",
    };
  },
  methods: {
    login: function () {
      axios.defaults.baseURL = process.env.BASE_API;
      var params = {
        cellphone: this.cellphone,
        password: this.password,
      };

      axios
        .post("/api/user/login", params, {
          headers: {
            "Content-Type": "application/json",
          },
        })
        .then(this.loginSucc);
    },
    loginSucc(res) {
      console.log(res);
      if (res.data != "") {
        this.$toast("登录成功");
        console.log("login success. go to control page");
        this.$router.push("/control");
      } else {
        this.$toast("登录失败", 6000);
        console.log(
          "login fail. no register found or error cellphone and password"
        );
      }
    },
  },
};
</script>
<style scoped>
.logo {
  width: 70%;
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.cellphone,
.password {
  border: solid 1px #e0e0e0;
  font-size: 0.3rem;
  color: #333;
  text-align: center;
  background-color: #f5f5f5;
  border-radius: 1px;
  margin-top: 0.2rem;
  height: 0.6rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

.login-desc {
  color: #999;
  font-size: 0.2rem;
  line-height: 1.5;
  margin-top: 0.6rem;
  text-align: center;
}

.login-btn {
  background-color: #3474ff;
  color: #fff;
  display: block;
  font-size: 0.4rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.6rem;
  width: 70%;
  height: 0.9rem;
}

.login-btn:active {
  background-color: #0052ff;
}

.no-account {
  position: absolute;
  bottom: 1rem;
  width: 100%;
  text-align: center !important;
  color: #999;
  font-size: 0.2rem;
}
</style>
